<template>
    <div>
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">

                <button class="menu-button" @click="toggleCollapse" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="isNavCollapsed ? 'true' : 'false'" aria-label="Toggle navigation">
                    <img class="menu-iocn" src="@/assets/img/download.png" alt="">
                </button>

                <div class="navbar-log-title">
                    <a class="navbar-brand" href="#"><img src="@/assets/img/logo.png" alt=""></a>
                    <span>ZTC</span>
                </div>
                <div>
                    <ul class="mb-2 mb-lg-0  navbar-nav-max">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">HOME</NuxtLink>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">QUOTES</NuxtLink>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">SWAP</NuxtLink>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">PLEDGE</NuxtLink>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">NODE</NuxtLink>
                            </a>
                        </li>
                        <!-- <li class="nav-item">
                  <a class="nav-link" href="#"><router-link to="/home">Invite </router-link></a>
                </li> -->
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">SHARE</NuxtLink>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">NFT</NuxtLink>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <NuxtLink to="/">WALLET</NuxtLink>
                            </a>
                        </li>
                        <!-- <li class="nav-item">
                  <a class="nav-link" href="#"><router-link to="/home">Whitepaper</router-link></a>
                </li> -->
                    </ul>
                </div>
                <div class="right-iocn">
                    <!-- <img src="@/assets/img/my.png" alt="">
              <img src="@/assets/img/wallet.png" alt=""> -->
                    <!-- :disabled="isMobile" -->
                    <button class="wallet-button" :disabled="isMobile" :class="{ 'has-account': thisAddress }"
                        @click="setDialogVisible()"> {{
                        formattedAccount || 'Connect Wallet' }}</button>
                </div>
                <div :class="{ 'collapse': true, 'navbar-collapse': true, 'show': isNavCollapsed }"
                    id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"> <router-link to="/">HOME</router-link>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"><router-link
                                    to="/">QUOTES</router-link></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"><router-link to="/">SWAP</router-link></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"><router-link
                                    to="/">PLEDGE</router-link></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"><router-link to="/">NODE</router-link></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"><router-link
                                    to="/">SHARE</router-link></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"><router-link to="/">NFT</router-link></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" @click="closeNavbar"><router-link
                                    to="/">WALLET</router-link></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

</template>

<script setup>
    import { ref } from 'vue';
    import { onMounted, computed, defineEmits } from 'vue'
    import { useCounterStore } from '@/store/index'

    const store = useCounterStore()
    // 定义响应式变量
    const isNavCollapsed = ref(false)
    const web3 = ref(null)
    const balance = ref(null)
    const walletType = ref(0)
    const isMobile = ref(false)
    const thisAddress = ref(null)
    return {
        isMobile,
        thisAddress
    }


    // 计算属性来格式化钱包地址
    const formattedAccount = computed(() => {
        if (this.thisAddress) {
            const firstPart = this.thisAddress.slice(0, 8) // 获取前四位
            const lastPart = this.thisAddress.slice(-4) // 获取后四位
            return `${firstPart}....${lastPart}` // 中间用....连接
        }
        return null
    })

    const setDialogVisible = () => {
        const emit = defineEmits(['header-button-clicked'])
        emit('header-button-clicked')
    }

    const toggleCollapse = () => {
        this.isNavCollapsed = !this.isNavCollapsed
    }
    const closeNavbar = () => {
        if (this.isNavCollapsed === true) {
            this.isNavCollapsed = false
        }
    }
    const handleResize = () => {
        this.isMobile = window.innerWidth < 768 // 或任何你认为适用的移动屏幕最大宽度
    }





    onMounted(() => {
        handleResize()
        window.addEventListener('resize', this.handleResize) // 监听窗口大小变化
    })

    onMounted(async () => {
        const data = await store.getData()
        thisAddress.value = data
    })

    onBeforeUnmount(() => {
        window.removeEventListener('resize', this.handleResize) // 组件销毁时移除监听
    })

</script>

<style scoped lang="less">
    ul {
        list-style-type: none;
        /* 去除项目符号 */
        margin: 0;
        /* 去除外边距 */
        padding: 0;
        /* 去除内边距 */
    }

    a {
        text-decoration: none !important;
    }

    @media(max-width:768px) {
        .container-fluid {
            width: 98% !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }


        .navbar-nav-max {
            display: none !important;

        }

        .right-iocn {
            margin-left: auto;

            .wallet-button {
                border: 0;
                background-color: #448aff;
                color: #FFF;
                border-radius: 50px;
                padding: 5px;
                width: 100%;
                font-size: 12px;
                font-weight: 600;
            }

            .has-account {
                background-color: #252833;
                color: #c7cad9;
                font-size: 13px;
                font-weight: 600;
                border: 1px solid #696c80;
            }
        }

        .navbar-brand img {
            width: 28px;
            height: 28px;
        }

        .navbar-log-title span {
            padding: 7px 0 0 0;
            color: #fffe07;
            font-size: 22px;
            font-weight: 600;
            margin-left: -5px;
        }

        .menu-button {
            margin-left: -5px;
            margin-top: 3.4px;
            border: 0;
        }

        .menu-iocn {
            width: 35px;
            height: 35px;
        }

    }

    @media (min-width: 768px) and (max-width: 992px) {
        .right-iocn {
            margin-left: auto;

            .wallet-button {
                border: 0;
                background-color: #448aff;
                color: #FFF;
                border-radius: 50px;
                padding: 5px;
                width: 150px;
                font-size: 15px;
                font-weight: 700;
            }

            .has-account {
                background-color: #252833;
                color: #c7cad9;
                font-size: 13px;
                font-weight: 600;
                border: 1px solid #696c80;
            }
        }

        .container-fluid {
            width: 95% !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #navbarSupportedContent {
            display: none !important;
        }

        .right-iocn img {
            width: 20px;
            height: 20px;
        }

        .navbar-brand img {
            width: 20px;
            height: 20px;
        }

        .navbar-log-title span {
            padding: 6px 0 0 0;
            color: #fffe07;
            font-size: 25px;
            font-weight: 700;
            line-height: 2px;
        }

        .menu-button {
            display: none;
        }

        .navbar-nav-max a {
            font-size: 15px;
            font-weight: 400;
        }

        .navbar-nav-max {
            .nav-item {
                width: 60px;
            }
        }
    }

    @media(min-width:992px) {
        .container-fluid {
            width: 95% !important;
        }

        #navbarSupportedContent {
            display: none !important;
        }

        .wallet-button {
            border: 0;
            background-color: #448aff;
            color: #FFF;
            border-radius: 50px;
            padding: 5px;
            width: 150px;
            font-size: 15px;
            font-weight: 700;
        }

        .has-account {
            background-color: #252833;
            color: #c7cad9;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid #696c80;
        }

        .right-iocn img {
            width: 40px;
            height: 40px;
        }

        .navbar-brand img {
            width: 30px;
            height: 30px;
        }

        .navbar-log-title span {
            padding: 6px 0 0 0;
            color: #fffe07;
            font-size: 25px;
            font-weight: 700;
            line-height: 2px;
        }

        .menu-button {
            display: none;
        }

        .navbar-nav-max a {
            font-size: 18px;
            font-weight: 400;
            margin: 0 15px 0 15px;
        }
    }

    .menu-button {
        background-color: #1b1e29;
    }

    body .bg-body-tertiary {
        background: #1b1e29 !important;
        /* 红色, 透明度为1 */
    }

    .navbar-log-title {
        display: flex;
        align-items: center;
    }

    .router-link-active {
        background-color: #252833;
        text-decoration: none;
        color: #eeeef5;
        border-radius: 10px;
        padding: 5px;
    }

    a {
        text-decoration: none;
        color: rgb(128, 128, 128);
    }

    .navbar-nav-max {
        display: flex;
        justify-content: right;
        align-items: center;
    }

    .nav-item {
        a :hover {
            background-color: #252833;
            color: #c7cad9;
            border-radius: 10px;
            padding: 5px;
        }
    }
</style>